<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/index.css" />
		<link rel="stylesheet" type="text/css" href="../css/main.css"/>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vant.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vue-lazyload.js"></script>
		<script src="../js/ajax.js"></script>
		<script src="html5plus://ready"></script>
		<style>
			 #one{
				background-color: red;
				padding-top: 20px;
				padding-bottom: 20px;
			}
			 
			#icon{
				padding-top: 8px;
				color: white;
			}
			section{
				background-color: #e1e2e3;
			}
			.white {
				background-color: white;
			}
			.qb{
				margin: 10px; 
				border-radius: 30px; 
				padding: 15px 0px;
			}
			.zixun{
				color: red; 
				border-right: 1px solid #969799; 
				padding: 2px 10px;
			}
			.gengduo{
				padding: 2px 10px;
				border-left: 1px solid #969799;
			}
		</style>
	</head>
	<body>
		<div id="app">
				<van-row id="one">
				  <van-col span="20">
					  <van-search placeholder="请输入搜索关键词" v-model="value" background="red"></van-search>
				  </van-col>
				  <van-col span="4">
					  <!-- <van-button type="warning">警告按钮</van-button> -->
						  <van-icon name="chat-o" size="35px" id="icon"></van-icon>
				  </van-col>
				</van-row>
			<section>
				<van-swipe :autoplay="3000" indicator-color="white">
					<van-swipe-item v-for="(img, index) in imageURL" :key="index">
						<img v-lazy="img.ImageUrl" style="width: 100%;"/>
					</van-swipe-item>
				</van-swipe>
				<div>
					<div class="white" style="display: flex; padding: 5px 10px 10px;border-radius: 15px;">
						<div style="margin: 3px 10px; text-align: center;" v-for="two in Hot">
							<div><img src="../img/shop/12.jpg" style="width: 50px; height: 50px;" /></div>
							<div>
								{{two.Name}}
							</div>
						</div>
					</div>
					<van-row  class="white qb">
						<van-col class="zixun" span="4">
							资讯
						</van-col>
						<van-col span="16">
							<van-swipe :autoplay="2000"  :show-indicators="false"><!-- 间隔2000，是否显示指示器 -->
							  <van-swipe-item v-for="list in titles" :key="list.id">
								{{list.Title}}
							  </van-swipe-item>
							</van-swipe>
						</van-col>
						<van-col span="4" class="gengduo">
							<div @click="gd">更多</div>
						</van-col>
					</van-row>
				</div>
				<div class="white" style="padding: 0px 3px;">
					<div style="border-left:2px solid red; font-size: 18px; padding: 5px 3px 3px;">
						热门推荐	
					</div>
					<div v-for="list in recommend" style="margin-top: 3px; width: 120px;">
						<div>
							<img style="width: 100%; height: 120px;" v-lazy="list.GoodsImageUrl.src" />
						</div>
						<div style="height: 30px; padding-left: 5px; text-align: left; text-overflow:ellipsis; overflow: hidden; white-space: nowrap;">{{list.Name}}</div>
						<div style="color: red; font-size: 20px; padding: 10px 0px;">
							{{list.RealPrice}}
						</div>
					</div>
				</div>
				<div>
					<div class="white" style="border-left:2px solid blue; margin: 5px 0px 0px 5px; font-size: 18px; padding: 5px 3px 3px;">
						商品列表
					</div>
					<van-row class="white" v-for="list in liebiao" :key="list.id" style="margin-top: 5px; display: flex; flex-direction: row; padding-left: 5px;">
						<van-col span="7">
							<img v-lazy="list.GoodsImageUrl.src" style=" width:100%" />
						</van-col>
						<van-col span="17">
							<div>
								{{list.Name}}
							</div>
							<div style="display: flex;">
								<div style="font-size: 18px; color: red;">￥{{list.RealPrice}}</div>
								<del style="font-size: 12px; color: #969799; margin-top: 6px;">价格￥{{list.MarketPrice}}</del>
							</div>
							<div style="display: flex;">
								<div style="color: #969799; flex: 1; font-size: 12px;">
									累计销量{{list.VirtualSaleCount}}
								</div>
								<div style="color: #969799; flex: 1; font-size: 12px; text-align: right;">
									{{list.BrowseCount}}次浏览
								</div>
							</div>
						</van-col>
					</van-row>
				</div>
			</section>
			
		</div>
		<script>
 			Vue.use(VueLazyload, {
                 error:"../img/shop/12.jpg",//加载失败后加载其他图片。
				 loading:"../img/shop/loading.gif", //加载中显示图片
             });
		      var app=new Vue({
		      	el:"#app",
				data:{
						value:"",
						imageURL:[],
						Hot:[],
						titles:[],
						recommend:[],
						liebiao:[],
					},
					methods:{
						gd:function(){
							plus.webview.open("gengduo.html","gengduo")
						}
					},
					created() {
						var _this = this;
						ajax({
							url:"http://dsapi.ysd3g.com/api/IndexData",
							dataType:'jsonp',
							data:{
							
							},
							success:function(res){
								console.log(res);
								_this.imageURL=res.Data.CarouselFigureList;
								_this.Hot=res.Data.HotGoodsTypeList;
								_this.titles=res.Data.InformationList;
								_this.recommend=res.Data.GoodsRecommendList;
								
							}
						});
						ajax({
							url:"http://dsapi.ysd3g.com/api/IndexGoodsData",
							dataType:"jsonp",
							data:{
								
							},
							success:function(res){
								console.log(res);
								_this.liebiao=res.Data;
								
							}
						});
						
					}
		      })
		</script>
	</body>
</html>
